<template>
  <div class="app-container">
    <Layout />
    <div class="main-container">
      <div class="exams">
        <h2>考试列表</h2>
        <div class="exam" v-for="(item, index) in exams">
          <el-descriptions>
            <el-descriptions-item label="考试id">{{ item.id }}</el-descriptions-item>
            <el-descriptions-item label="科目">{{ item.subject }}</el-descriptions-item>
            <el-descriptions-item label="地点">{{ item.location }}</el-descriptions-item>
            <el-descriptions-item label="时间">
              {{ new Date(item.date).toDateString() }}
            </el-descriptions-item>
            <el-descriptions-item label="点击">
              <div @click="score(item)" style="color: green;cursor: pointer;"> 查看考试详情</div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="学生名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入学生名称" />
        </el-form-item>
        <el-form-item label="学生性别" prop="gender">
          <el-input v-model="form.gender" placeholder="请输入学生性别" />
        </el-form-item>
        <el-form-item label="学生专业" prop="major">
          <el-input v-model="form.major" placeholder="请输入学生专业" />
        </el-form-item>
        <el-form-item label="学生年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入学生年龄" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->
      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
        <!-- <div>
        <span>名字：{{ scores.name }} | </span>
        <span>性别：{{ scores.gender }} | </span>
        <span>年龄：{{ scores.age }} | </span>
        <span>专业：{{ scores.major }} | </span>
      </div>
      <br />
      <div>
        <span>平均分数：{{ scores.avgScore }}</span>
      </div>
      <div>
        <span>最低分数：{{ scores.minScore }}</span>
      </div>
      <div>
        <span>最高分数：{{ scores.maxScore }}</span>
      </div> -->
        <el-table v-loading="loading" :data="students" @row-click="itemSelect">
          <el-table-column width="55" align="center" />
          <el-table-column label="学生id" prop="studentId" width="120" />
          <el-table-column label="状态" prop="status" width="120" />
          <el-table-column label="总分" prop="totalScore" :show-overflow-tooltip="true" width="150" />
          <el-table-column label="评分" width="120"><a style="cursor: pointer;color: green;">点我开始评分</a></el-table-column>

          <!-- {
            "id": 1,
            "studentId": 1,
            "totalScore": 9,
            "examId": 1,
            "status": 1
        }, -->
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import Layout from '@/layout'
import { autoGenerate, getAllPapers } from '@/api/autoGenerate'
import { getExams, getScores, getAnswers } from '@/api/exam'
// import examPaperApi from '@/api/examPaper'
// import subjectApi from '@/api/subject'

export default {
  name: 'Teacher',
  components: { Pagination, Layout },
  data() {
    return {
      papers: [],
      exams: [],
      open: false,
      id: undefined,
      examId: undefined,
      form: {},
      title: null,
      students: [],
      loading: false
    }
  },
  created() {
    this.getAllPapers()
    this.getExams()
  },
  methods: {
    score(item) {
      console.log(item)
      this.id = item.id
      this.open = true
      this.title = item.subject
      getScores({ examId: item.id, current: 1, size: 10 }).then(res => {
        this.students = res.records || []
      })
        .catch((e) => {
          _this.$message.error(re.message);
        });
    },
    getAllPapers() {
      let _this = this
      getAllPapers()
        .then((re) => {
          console.log(re)
          if (re.success) {
            this.papers = re.data
          } else {
            _this.$message.error(re.message);
          }
        })
        .catch((e) => {
          _this.$message.error(re.message);
        });
    },
    getExams() {
      let _this = this
      console.log(getExams)
      getExams({ studentId:0, current: 1, size: 100 })
        .then((re) => {
          console.log(re)
          if (re.records) {
            this.exams = re.records
          } else {
            _this.$message.error('出现未知错误');
          }
        })
        .catch((e) => {
          _this.$message.error('出现未知错误');
        });
    },
    initSubject() {
      let _this = this
      // subjectApi.list().then(re => {
      //   _this.subjectList = re.response
      //   let subjectId = _this.subjectList[0].id
      //   _this.queryParam.subjectId = subjectId
      //   _this.tabId = subjectId.toString()
      //   _this.search()
      // })
    },
    search() {
      this.listLoading = true
      // examPaperApi.pageList(this.queryParam).then(data => {
      //   const re = data.response
      //   this.tableData = re.list
      //   this.total = re.total
      //   this.queryParam.pageIndex = re.pageNum
      //   this.listLoading = false
      // })
    },
    paperTypeChange(val) {
      this.search()
    },
    subjectChange(tab, event) {
      this.queryParam.subjectId = Number(this.tabId)
      this.search()
    },
    itemSelect(row) {
      console.log(row)
      let _this = this
      this.$modal.confirm(`是否要对id为${row.studentId}的学生评分`).then(function () {
        // this.$router.push("/answer?studentId=" + row.id + '&examId=' + this.id);
        // window.location.href = "/mark-score?studentId=" + row.id + '&examId=' + _this.id
        _this.$router.push("/mark-score?studentId=" + row.studentId + '&examId=' + _this.id);
      });
      // getAnswers({ studentId:row.studentId, examId:this.id, current:1, size:100 }).then(res=>{
      //   console.log("res",res)
      // })
    }
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  // flex-direction: row-reverse;
  justify-content: center;
  // align-items: center;

  .papers {
    border-radius: 20px;
    position: relative;
    display: flex;
    // left: 50%;
    // margin-left: -250px;
    margin-top: 50px;
    width: 500px;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background-color: rgb(249, 249, 249);

    .paper {
      padding: 10px;
      border-radius: 20px;
    }
  }

  .exams {
    border-radius: 20px;
    position: relative;
    display: flex;
    // left: 50%;
    margin-left: 50px;
    margin-top: 50px;
    width: 500px;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background-color: rgb(249, 249, 249);

    .exam {
      padding: 10px;
      border-radius: 20px;
    }
  }
}
</style>
